<template>
    <div class="coupon-list">
        <div class="content-activity">
            <van-swipe :autoplay="3000" indicator-color="" class="swipe">
                <van-swipe-item v-for="item,index in swipeImgUrls" :key="index">

                    <a :href="item.aurl" >
                        <img :src="item.url">
                    </a>
                    <div class="clearboth"></div>
                </van-swipe-item>
            </van-swipe>
        </div>

        <van-tabs v-model="tabsActive" swipeable color="#787ac3" @click="changeTabsActice">
            <van-tab v-for="(tab,key) in typeTabs" :key="key" :title="tab.text">
                <div class="list-wrapper">
                    <van-list
                            v-model="tabsPages[tabsActive].loading"
                            :finished="tabsPages[tabsActive].finished"
                            :finished-text="tabsPages[tabsActive].finishedText"
                            @load="onLoad">
                        <div class="coupon-flex coupon-vou-content" v-for="(item,index) in pickupCoupons" :key="index">
                            <div class="coupon-flex-box">
                                <div class="coupon-flex-inside">
                                    <div class="coupon-flex-cp-img">
                                        <img :src="item.logo">
                                    </div>
                                    <div class="coupon-flex-box">

                                        <div class="coupon-name">
                                            <em>{{item.couponName}}</em>
                                        </div>
                                        <div class="vip-level-names">
                                            <!--<small v-for="(name ,index) in item.vipLevelNames" :key="index">-->
                                                 <!--{{name}}-->
                                            <!--</small>-->
                                        </div>
                                        <div class="receiveNum"> 已有 {{item.receiveNum}} 人领取</div>
                                    </div>
                                </div>
                            </div>
                            <div class="coupon-vou-button">
                                <button class="coupon-vou-btn-der" :class="item.btnClass" @click="item.cpStatus==1&&toDetail(item.id)">{{item.text}}</button>
                            </div>
                        </div>
                    </van-list>
                </div>
            </van-tab>
        </van-tabs>

    </div>
</template>
<script>
    const TYPE_TABS = [
        {index:0,type: 'all', text: '全部'},
        {index:1,type: 'going', text: '进行中'},
        {index:2,type: 'nostart', text: '未开始'},
        {index:3,type: 'ended', text: '结束'},
    ]
    const CP_STATUS = [
        {status: 1, text: '领取',btnClass:'can-receive'},
        {status: 2, text: '未开始',btnClass:'no-start'},
        {status: 3, text: '已结束',btnClass:'end'},
    ]
    const PAGE_SIZE =20
    const FINISHED_TEXT = ['没有更多了', '暂无记录']
    export default {
        name: "CouponList",
        components: {},
        data() {
            return{
                tabsActive:0,
                pageNo:1,
                pageSize:PAGE_SIZE,
                typeTabs:TYPE_TABS,
                tabsPages:[
                    {
                        index:0,
                        type:TYPE_TABS[0].type,
                        pageNo:1,
                        pageSize:PAGE_SIZE,
                        loading:false,
                        finished:false,
                        finishedText: FINISHED_TEXT[0]
                    },
                    {
                        index:1,
                        type:TYPE_TABS[1].type,
                        pageNo:1,
                        pageSize:PAGE_SIZE,
                        loading:false,
                        finished:false,
                        finishedText: FINISHED_TEXT[0],
                    },
                    {
                        index:2,
                        type:TYPE_TABS[2].type,
                        pageNo:1,
                        pageSize:PAGE_SIZE,
                        loading:false,
                        finished:false,
                        finishedText: FINISHED_TEXT[0],
                    },
                    {
                        index:3,
                        type:TYPE_TABS[3].type,
                        pageNo:1,
                        pageSize:PAGE_SIZE,
                        loading:false,
                        finished:false,
                        finishedText: FINISHED_TEXT[0]
                    }
                ],
                pickupCouponListMap:{
                    all:[],
                    going:[],
                    nostart:[],
                    ended:[],
                },
                /*轮播图片*/
                swipeImgUrls: []
            }
        },
        created(){
            this.fetchPickupCouponList()
        },
        mounted(){
            this.showAD()
        },
        computed: {
            pickupCoupons() {
                let tabsActive = this.tabsActive;
                let type = this.typeTabs[tabsActive].type
                let list = this.pickupCouponListMap[type]
                if (!list || list.length <= 0) return []

                return list.map(item => {
                    let cpStatus = CP_STATUS.filter(ele => ele.status == item.cpStatus)[0]
                    item.btnClass = cpStatus.btnClass
                    item.text = cpStatus.text;
                    return item;
                })
            }
        },
        methods: {
            fetchPickupCouponList(){
                let tabsPage =this.tabsPages[this.tabsActive]
                this.$api.coupons.pickupCouponList({pageNo:tabsPage.pageNo,pageSize:tabsPage.pageSize,type:tabsPage.type}).then(res=>{
                    if(res.code==0){
                        let page = res.data;
                        let listData = page.list;
                        //console.log("page",page)
                        // console.log("pickupCouponListMap:"+tabsPage.type,this.pickupCouponListMap[tabsPage.type])
                        this.tabsPages[this.tabsActive].loading=false;
                        this.tabsPages[this.tabsActive].finishedText =FINISHED_TEXT[0]
                        if(page.totalPage==0){
                            this.tabsPages[this.tabsActive].finishedText =FINISHED_TEXT[1]
                            this.tabsPages[this.tabsActive].finished=true;
                            return
                        }else if(this.tabsPages[this.tabsActive].pageNo==1&&page.currPage==1&&(!this.pickupCouponListMap[tabsPage.type]||this.pickupCouponListMap[tabsPage.type].length<=0)&&(listData&&listData.length>0)){
                            this.pickupCouponListMap[tabsPage.type] = listData
                            this.tabsPages[this.tabsActive].finished=true;
                            return
                        }else  if(page.totalPage==page.currPage&&page.currPage>1){
                            this.tabsPages[this.tabsActive].finished=true;
                            this.pickupCouponListMap[tabsPage.type] = this.pickupCouponListMap[tabsPage.type].concat(listData) //加最后一次
                            return
                        }else if(page.currPage==this.tabsPages[this.tabsActive].pageNo){
                            this.tabsPages[this.tabsActive].finished=true;
                            return
                        }else {
                            this.pickupCouponListMap[tabsPage.type] = this.pickupCouponListMap[tabsPage.type].concat(listData)
                            this.tabsPages[this.tabsActive].pageNo++
                        }
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            toDetail(id){
                this.$router.push({path:'/coupon_detail',query:{id:id}})
            },
            changeTabsActice(active){
                this.tabsActive=active
            },
            onLoad(){
                this.fetchPickupCouponList()
            },
            showAD(){
                this.$api.advert.advertList({field:'isShow',value:'显示',type:'优惠券-轮播广告'}).then(res=>{
                    if(res.code==0){
                        var data = JSON.parse(res.data)
                        var success = data.success
                        var adverJsonList = data.adverJsonList
                        this.swipeImgUrls = adverJsonList
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }
        }
    }
</script>

<style lang="less" >
    @import "../../assets/less/base";
    .coupon-list{
        min-height: 100%;
        background-color: @main-background-color;
        .list-wrapper{
            .item{
                position: relative;
                display: block;
                height: 80px;
                margin: 10px !important;
                border: 1px solid #e3e3e3;
                font-size: 14px;
                img.item_logo {
                    position: absolute;
                    display: block;
                    padding: 4px;
                    height: 80px;
                    width: 80px;
                    border-radius: 3px;
                }
            }
            .infos{
                position: absolute;
                top: 4px;
                left: 80px;
                right: 0;
                bottom: 4px;
                margin: 4px;
                span.item_name{
                    position: absolute;
                    left: 0;
                    display: inline-block;
                    text-align: left;
                    font-size: 16px;
                    color: #8097A9;
                }
                span.vip{
                    position: absolute;
                    top:14px;
                    right: 0;
                    display: inline-block;
                    text-align: right;
                    font-size: 8px;
                    color: #FC9E4E;
                }
                span.text{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: inline-block;
                    text-align: left;
                    font-size: 14px;
                    color: #8097A9;
                }
            }
            button.van-button{
                right: 4px;
                position: absolute;
                bottom: 0;
                margin: 0!important;
                &.disabled{
                    border-color:lightgray ;
                    background-color: lightgray;
                }
            }
        }
        .empty-wrapper{
            text-align: center;
            span{
                display: block;
                padding: 200px 0;
                color: @main-theme-color;
                .fw();
                .fz(20px)
            }
        }
    }
    .coupon-vou-content {
        position: relative;
        background-color: #fff;
        margin: 5px 5px 10px 5px;
        padding: 0;
        height: 100px;
        border-radius: 5px;
        border: 1px solid #E8E8E8;
        overflow: hidden;
        &:first-child{
            margin-top: 10px;
        }
        &.coupon-flex {
            display: flex;
            align-items: center;
        }
        .coupon-flex-box {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            height: 75px;
            font-size: 14px;
            color: #333;
            .coupon-flex-inside{
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                padding: 0;
                position: relative;
                .coupon-flex-cp-img {
                    width: 75px;
                    height: 75px;
                    padding: 0px 5px;
                    img {
                        width: 100%;
                        height: auto;
                        display: block;
                        border: none;
                    }
                }
                .coupon-flex-box {
                    position: relative;
                    .coupon-name {
                        color: @main-theme-color;
                        font-weight: bold;
                        text-align: left;
                        em {
                            font-style: normal;
                            font-weight: bold;
                            font-size: 16px;
                        }
                    }
                    .vip-level-names{
                        text-align: right;
                        small{
                            .fz(10px);
                        }
                    }
                    .receiveNum{
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        color: @main-theme-color;
                        font-style:italic;
                        .fz(10px);
                        padding-right: 10px;
                    }
                }
            }
        }
        .coupon-vou-button {
            padding: 10px;
            font-size: 12px;
            text-align: center;
            width: 90px;
            /*background-color: #e7e6fd;*/
            position: relative;
            height: 110px;
            border-left: 1px dashed #ddd;
            &:before {
                content: '';
                width: 0;
                height: 0;
                border-width: 8px 8px 0;
                border-style: solid;
                border-color: #e0e0e0 transparent transparent;
                position: absolute;
                top: 0;
                left: -8px;
            }
            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: -8px;
                width: 0;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
                border-bottom: 8px solid #e0e0e0;
            }
            .coupon-vou-btn-der {
                width: 85px;
                height: 35px;
                line-height: 35px;
                color: #ffffff;
                border-radius: 70px;
                position: absolute;
                bottom: 40%;
                right: 12px;
                font-size: 12px;
                &.can-receive{
                    border: 1px solid @main-theme-color;
                    background: @main-theme-color;
                }
                &.no-start{
                    border: 1px solid lightgray;
                    background: lightgray;
                }
                &.end{
                    border: 1px solid lightgray;
                    background: lightgray;
                }

            }
        }
    }
    .van-tabs__content{
        padding-bottom: 50px;
    }

</style>
